<template>
	<div>
		<!-- <form action="http://10.10.10.114:8080/admin/login">
		<p><input name="username"/></p>
		<p><input name="password"/></p>
		<p><input type="submit" value="登录"></p>
		</form> -->
		<el-form :model="ruleForm" status-icon style="width:400px;margin:100px auto;" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  <el-form-item  prop="username">
		    <el-input type="text" v-model="ruleForm.username" placeholder="请输入用户名" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item  prop="password">
		    <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" style="width:100%" @click="submitForm('ruleForm')">登录</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
	//导入登录的api方法  专门用来发请求的方法，我们称他们为api
	import {toLogin} from '@/api/user.js'
	// 引入cookie操作对象
	import Cookies from 'js-cookie'
	export default {
		data(){
			return{
				  ruleForm: {
						username:'admin',
						password:'macro123'
				 },
				 rules:{}
			}	  
		},
		methods:{
			submitForm(){
				toLogin(this.ruleForm).then((resp)=>{
					if(resp.code == 200){
						//登录成功,拿到返回的token，保存到浏览器cookie，然后再跳转到首页
						let Authorization = resp.data.tokenHead + resp.data.token;
						Cookies.set("Authorization",Authorization);
						this.$router.push("/");
						return;
					}else{
						//失败,弹窗，提示
						  this.$message({
						           message: resp.message,
						           center: true,
								   type:"error",
								   // duration:0,
								   customClass:"abcd"
						         });
					}
				})
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.login-bg {
		height: 220px;
		width: 100%;
		background: #409EFF url(../../assets/images/login_center_bg.png);
		background-size: 1080px;
		position: absolute;
		top: 50%;
		margin-top: -110px;
	}

	.login-border {
		border-top: 10px #409EFF solid;
	}

	.box-card {
		width: 360px;
		height: 500px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -150px;
		margin-left: -180px;

		.login-title {
			text-align: center;
			font-size: 28px;
			font-weight: bold;
			color: rgb(64, 158, 255);

			#icon-login-mall {
				width: 56px;
				height: 56px;
			}
			p{
				padding-bottom:10px;margin:5px;
			}
		}

	}
</style>
